<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单绑定控件</title>
    <script src="../vue2.js"></script>
</head>
<body>
<div id="box">
    <label>
        <textarea v-model="myText"></textarea>
    </label>
    {{myText}}<br>
    <label>用户名:
        <input type="text" v-model="myText">
    </label><br>
    <label>
        <input type="checkbox" v-model="isRemember">记住用户名
    </label>
    <button @click="handleLogin">登录</button>

    <h2>兴趣爱好</h2>
    <label>
        <input type="checkbox" v-model="checklist" value="篮球">篮球
    </label>
    <label>
        <input type="checkbox" v-model="checklist" value="羽毛球">羽毛球
    </label>
    <label>
        <input type="checkbox" v-model="checklist" value="游泳">游泳
    </label>
    {{checklist}}

    <h2>性别</h2>
    <label>
        <input type="radio" v-model="radioList" value="男">男
    </label>
    <label>
        <input type="radio" v-model="radioList" value="女">女
    </label>
    {{radioList}}
</div>
</body>
<script>
    new Vue({
        el: "#box",
        data: {
            myText: localStorage.getItem("username"),
            isRemember: false,
            checklist: [],
            radioList: []
        },
        methods: {
            handleLogin() {
                if (this.isRemember) {
                    localStorage.setItem('username',this.myText)
                }
                console.log(this.myText,this.checklist,this.radioList)
            }
        }
    })

    /*
        vue 架构模式
        mvc mvvm（双向数据绑定）
     */
</script>
</html>